<template>
  <div v-if="isVisible" class="modal-overlay" @click.self="close">
   
    <div class="modal-content">
      <span class="close" @click="close">&times;</span>
      <h2>手机号登录</h2>

      <!-- 阻止表单的默认提交行为 -->
      <form @submit.prevent="handleLogin"> 
      
        <div class="input-wrapper">
          <input
            type="text"
            id="username"
            v-model="username"
            required
            placeholder="86+ 输入手机号"
            @focus="removePlaceholder"
            @blur="addPlaceholder"
          />
        </div>
        <div>
          <input
            type="text"
            id="code"
            class="code"
            v-model="code"
            required
            placeholder="输入验证码"
            @focus="removePlaceholder"
            @blur="addPlaceholder"
          />
          <button type="button" @click="getCode" class="getsure">获取验证码</button>
        </div>
        <button type="submit" class="loginpage">登录</button>
      </form>
      <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
    </div>
  </div>

</template>

<script>
export default {
  props: {
    isVisible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      username: '',
      code: '',
      errorMessage: '',
      verificationCode: '', // 存储生成的验证码
      codeSent: false // 标记验证码是否已发送
    };
  },
  methods: {
    close() {
      this.$emit('close');
      this.resetForm();
    },
    getCode() {
      if (/^\d{11}$/.test(this.username)) {
        this.verificationCode = Math.floor(100000 + Math.random() * 900000).toString(); // 生成6位验证码
        console.log('验证码已发送到', this.username, '验证码为:', this.verificationCode);
        this.codeSent = true; // 设置验证码已发送标志
       
      } else {
        alert('请输入有效的手机号');
      }
    },
    removePlaceholder() {
      this.placeholderVisible = false;
    },
    addPlaceholder() {
      if (!this.username && this.code) {
        this.placeholderVisible = true;
      }
    },
    handleLogin() {
      if (this.code === this.verificationCode) {
        alert('登录成功！');
        this.close();
      } else {
        this.errorMessage = '验证码错误或未发送';
      }
    },
    resetForm() {
      this.username = '';
      this.code = '';
      this.errorMessage = '';
      this.verificationCode = ''; // 重置验证码
      this.codeSent = false; // 重置验证码发送状态
    }
  }
};
</script>

<style>

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: rgb(248, 249, 249);
  padding: 20px;
  border-radius: 8px;
  width: 800px;
  height: 450px;
  position: relative;
  display: flex;
  float: right;
}
.close {
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
}
.error {
  color: red;
}
.input-wrapper {
  display: flex;
  align-items: center;
  margin-top: 100px;
}
.getsure{
  color: red;
}
.code{
  margin-top: 20px;
}
.loginpage{
  margin-top: 20px;
  
}
input{
  width: 500px;

}
</style>
